<template>
  <el-dialog :visible.sync="visible" width="50%" custom-class="default-dialog" :close-on-click-modal="false"
    @close="cancel" append-to-body v-dialogDrags>
    <div slot="title">
      <img v-if="type" :src="require(`@/assets/img/${type}.png`)" alt="">
      <span>{{ title }} </span>
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="dialog-form" :disabled="type == 'view'">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="站点名称" prop="weatherStationId">
            <el-select size="small" v-model="form.weatherStationId" filterable placeholder="请选择">
              <el-option
                v-for="item in dmOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="监测类型" prop="dmlx">
            <el-select size="small" v-model="dmlx"  placeholder="请选择" @change="onZBSelectChange">
              <el-option
                v-for="item in jclxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-show="isTemperatureLoaded">
        <el-col :span="24">
          <el-form-item label="最低温度" prop="minTemp">
            <el-input   v-model="form.minTemp" placeholder="请输入最低值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-show="isTemperatureLoaded">
        <el-col :span="24">
          <el-form-item label="最高温度" prop="maxTemp">
            <el-input   v-model="form.maxTemp" placeholder="请输入最高值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"  v-show="isHumidityLoaded">
        <el-col :span="24">
          <el-form-item label="湿度" prop="humidity">
            <el-input   v-model="form.humidity" placeholder="请输入湿度值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"  v-show="isRadiationLoaded">
        <el-col :span="24">
          <el-form-item label="辐射" prop="radiation">
            <el-input   v-model="form.radiation" placeholder="请输入辐射值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"  v-show="israinfallLoaded">
        <el-col :span="24">
          <el-form-item label="雨量" prop="rainfall">
            <el-input   v-model="form.rainfall" placeholder="请输入雨量值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"  v-show="iswindspeedLoaded">
        <el-col :span="24">
          <el-form-item label="风速" prop="speed">
            <el-input   v-model="form.speed" placeholder="请输入风速值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="监测日期" prop="date">
            <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" v-if="type != 'view'" type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      isTemperatureLoaded: true,
      isHumidityLoaded:false,
      isRadiationLoaded:false,
      israinfallLoaded:false,
      iswindspeedLoaded:false,
      title: '',
      form: {
        date:'',
        stationId:'',
        minTemp:'',
        maxTemp:'',
        humidity:'',
        radiation:'',
        rainfall:'',
        speed:''
      },
      dmOptions:[],
      jclxOptions: [
        {
          label: '气温',
          value: '1'
        }, {
          label: '湿度',
          value: '2'
        }, {
          label: '辐射',
          value: '3'
        }, {
          label: '雨量',
          value: '4'
        }, {
          label: '风速',
          value: '5'
        }],
      rules: {
        weatherStationId: [{ required: true, message: '请输入断面名称', trigger: 'blur' }],
        date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
      },
/*      rules: {
        weatherStationId: [{ required: true, message: '请输入断面名称', trigger: 'blur' }],
        /!*dmlx: [{ required: true, message: '请选择类型', trigger: 'blur' }],*!/
        date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
        minTemp: [{ required:this.isTemperatureLoaded, message: '请输入最低温度值', trigger: 'blur' }],
        maxTemp: [{ required: this.isTemperatureLoaded, message: '请输入最高温度值', trigger: 'blur' }],
        humidity: [{ required: this.isHumidityLoaded, message: '请输入湿度值', trigger: 'blur' }],
        radiation: [{ required: this.isRadiationLoaded, message: '请输入辐射值', trigger: 'blur' }],
        rainfall: [{ required: this.israinfallLoaded, message: '请输入雨量值', trigger: 'blur' }],
        speed: [{ required: this.iswindspeedLoaded, message: '请输入风速值', trigger: 'blur' }],
      },*/
      type: '',
      dmlx:'',
    };
  },
  mounted() {
    this.getparams();
  },
  methods: {
    onZBSelectChange(){
      //this.getDMMC()
      switch(this.dmlx){
        case '1':
          this.isTemperatureLoaded=true;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '2':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=true;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '3':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=true;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '4':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=true;
          this.iswindspeedLoaded=false;
          break;
        case '5':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=true;
          break;
        default:
          this.isTemperatureLoaded=true;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
      }
    },
    /*async getDMMC(){
      let res = await this.$api.getHasWeatherStationName(this.dmlx,{ keywords:''})
      if(res && res.code == 200){
        this.dmOptions = res.data || []
        this.form.station = this.dmOptions[0].id;
      }
    },*/
    getparams(){
      this.$api.getHasWeatherStationName({ keywords:""}).then((res) => {
        if(res && res.code == 200){
          this.dmOptions = res.data || []
        }
      })
    },
    showModal(type,dmtype, row) {
      this.visible = true
      this.type = type
      this.dmlx=dmtype
      switch(this.dmlx){
        case '1':
          this.isTemperatureLoaded=true;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '2':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=true;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '3':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=true;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
          break;
        case '4':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=true;
          this.iswindspeedLoaded=false;
          break;
        case '5':
          this.isTemperatureLoaded=false;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=true;
          break;
        default:
          this.isTemperatureLoaded=true;
          this.isHumidityLoaded=false;
          this.isRadiationLoaded=false;
          this.israinfallLoaded=false;
          this.iswindspeedLoaded=false;
      }
      if (type == 'add') {
        this.title = '新增'
        this.form = {
        }
      } else if (type == 'edit') {
        this.title = '编辑'
        this.getInfoInit(row.id)
      } else if (type == 'view') {
        this.title = '详情'
        this.getInfoInit(row.id)
      }
    },
    // 详情
    getInfoInit(id) {
      this.$api.getWeatherStationMonitor(this.dmlx,{ id: id }).then(res => {
        if (res && res.code == 200) {
          let data = res.data || {}
          this.form = data
          /*switch(this.dmtype){
            case '1':
              serie1Data.push(l.humidity);
              break;
            case '2':
              serie1Data.push(l.humidity);
              break;
            case '3':
              serie1Data.push(l.radiation);
              break;
            case '4':
              serie1Data.push(l.rainfall);
              break;
            case '5':
              serie1Data.push(l.speed);
              break;
            default:
              ;
          }*/
          /*if(this.dmtype==='1'){
            this.form.monitorValue=  Number(data.waterLevel)
          }else{
            this.form.monitorValue= Number(data.flow)
          }
          this.form.dmlx = this.dmtype*/
        }
      })
    },
    // 确定
    sure() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            this.$api.addWeatherStationMonitor(this.dmlx,this.form).then(res => {
              if (res && res.code == 200) {
                this.$notify.success({
                  title: '成功',
                  message: '数据保存成功'
                });
                this.visible = false
                this.$emit('listInit')
              }
            })
          } else if (this.type == 'edit') {
            this.$api.updateWeatherStationMonitor(this.dmlx,this.form).then(res => {
              if (res && res.code == 200) {
                this.$notify.success({
                  title: '成功',
                  message: '数据保存成功'
                });
                this.visible = false
                this.$emit('listInit')
              }
            })
          }
        }
      });
    },
    // 取消
    cancel() {
      this.visible = false;
      this.$refs["form"].resetFields();
    },
  }
};
</script>
<style lang="less" scoped>
.el-form-item__label {
  width: 150px;
}
</style>
